<template>
  <div>
    <Block :title="`涨停基因分数：<span class='num'>${score}</span>`" :isFull="true">
      <Rose :drawData="drawData" />
    </Block>
    <Block title="涨停基因分析" :isFull="true">
      <GeneAnalysis :geneInfo="geneInfo" :test="'1'"></GeneAnalysis>
    </Block>
  </div>
</template>

<script>
import Block from '@/components/common/Block.vue';
import GeneAnalysis from '@/components/limitDetail/GeneAnalysis.vue';
import Rose from '@/components/draw/Rose.vue';

import { errorReport, formatNumber, convertNumber } from '@/scripts/tools.js';

export default {
  components: {
    Block,
    GeneAnalysis,
    Rose,
  },
  props: {
    geneData: {
      type: Object,
      default: () => ({}),
    },
    score: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 涨停基因分析配置
      geneInfo: {
        shortActive: {
          name: '短期活跃',
          score: 0,
          topLimit: 40,
          analysis: '',
          bgColor: '#f7e8ef',
          leftColor: '#FF2436',
          rightColor: '#FF5866',
          scoreColor: '#F03036',
        },
        timeSharing: {
          name: '分时',
          score: 0,
          topLimit: 20,
          analysis: '',
          bgColor: '#f1eafc',
          leftColor: '#B341D9',
          rightColor: '#C56EE2',
          scoreColor: '#B341D9',
        },
        turnOverRate: {
          name: '换手',
          score: 0,
          topLimit: 10,
          analysis: '',
          bgColor: '#e9e9ff',
          leftColor: '#4433FF',
          rightColor: '#8E61FF',
          scoreColor: '#4433FF',
        },
        trend: {
          name: '趋势',
          score: 0,
          topLimit: 6,
          analysis: '',
          bgColor: '#e5f2ff',
          leftColor: '#29A6FF',
          rightColor: '#58B9FF',
          scoreColor: '#29A6FF',
        },
        popularity: {
          name: '人气',
          score: 0,
          topLimit: 6,
          analysis: '',
          bgColor: '#e6f7fc',
          leftColor: '#14CCBD',
          rightColor: '#5AEEE2',
          scoreColor: '#14CCBD',
        },
        breakthrough: {
          name: '突破',
          score: 0,
          topLimit: 6,
          analysis: '',
          bgColor: '#e3f5f1',
          leftColor: '#07AB4B',
          rightColor: '#42D780',
          scoreColor: '#07AB4B',
        },
        shrinkageUp: {
          name: '缩量上涨',
          score: 0,
          topLimit: 6,
          analysis: '',
          bgColor: '#f7f1eb',
          leftColor: '#FF9500',
          rightColor: '#FFAE3D',
          scoreColor: '#FF9500',
        },
        bigMoney: {
          name: '大单',
          score: 0,
          topLimit: 6,
          analysis: '',
          bgColor: '#f7eded',
          leftColor: '#FF661A',
          rightColor: '#FF8A50',
          scoreColor: '#FF661A',
        },
      },
      drawData: [],
    };
  },
  methods: {
    /**
     * 处理个股涨停基因
     */
    dealGeneData(geneData) {
      try {
        Object.keys(this.geneInfo).forEach(key => {
          this.geneInfo[key].score = geneData[key].score;
        });
        const drawSequence = [
          'turnOverRate',
          'breakthrough',
          'trend',
          'popularity',
          'shortActive',
          'bigMoney',
          'shrinkageUp',
          'timeSharing',
        ];
        this.drawData = drawSequence.map(item => [this.geneInfo[item].score, this.geneInfo[item].topLimit]);
        // 获取基因分析文案
        const { turnOverRate, breakthrough, trend, popularity, shortActive, bigMoney, shrinkageUp, timeSharing } =
          geneData;
        this.dealShortActive(shortActive.data);
        this.dealTimeSharing(timeSharing.data);
        this.dealTurnOverRate(turnOverRate.data);
        this.dealTrend(trend.data);
        this.dealOther(popularity.data, 'popularity');
        this.dealOther(breakthrough.data, 'breakthrough');
        this.dealOther(shrinkageUp.data, 'shrinkageUp');
        this.dealBigMoney(bigMoney.data);
      } catch (err) {
        errorReport({
          name: `dealGeneData函数异常,${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
    /**
     * 处理短期活跃基因
     */
    dealShortActive(data) {
      try {
        const { averageAmplitude10, limitUp30, highestRise30, limitUp10, highestRise10 } = data;
        this.geneInfo.shortActive.analysis = `近10日平均振幅${
          formatNumber(averageAmplitude10, '+M.2%') || '--%'
        }，近30天内涨停${formatNumber(limitUp30, '+M') || '--'}次，
      30日内最高涨幅超过5%出现${formatNumber(highestRise30, '+M') || '--'}次，近10日内涨停${
          formatNumber(limitUp10, '+M') || '--'
        }次，10日内涨停次数高涨幅超过5%日出现${formatNumber(highestRise10, '+M') || '--'}次`;
      } catch (err) {
        errorReport({
          name: `dealShortActive函数异常，${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
    /**
     * 处理分时基因
     */
    dealTimeSharing(data) {
      try {
        const { highestRiseToday, lowestRiseToday, riseInClose, riseInOpen } = data;
        this.geneInfo.timeSharing.analysis = `当日开盘涨幅${formatNumber(riseInOpen, '+M.2%') || '--%'}，
      盘中运行时最高涨幅${formatNumber(highestRiseToday, '+M.2%') || '--%'}，最低涨幅${
          formatNumber(lowestRiseToday, '+M.2%') || '--%'
        }，当前实时涨幅${formatNumber(riseInClose, '+M.2%') || '--%'}`;
      } catch (err) {
        errorReport({
          name: `dealTimeSharing函数异常，${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
    /**
     * 处理换手基因
     */
    dealTurnOverRate(data) {
      try {
        const changeJiYin = data;
        let stockAwayData;
        if (changeJiYin) {
          // [0,3)：不是很活跃，[3,10]：一般，(10,20]：比较活跃，20以上：十分活跃
          const NOT_ACTIVE = 3;
          const COMMONLY = 10;
          const ACTIVE = 20;
          if (changeJiYin >= 0 && changeJiYin < NOT_ACTIVE) {
            stockAwayData = '不是很活跃';
          } else if (changeJiYin >= NOT_ACTIVE && changeJiYin <= COMMONLY) {
            stockAwayData = '一般';
          } else if (changeJiYin > COMMONLY && changeJiYin <= ACTIVE) {
            stockAwayData = '比较活跃';
          } else {
            stockAwayData = '十分活跃';
          }
        } else {
          stockAwayData = '--';
        }
        this.geneInfo.turnOverRate.analysis = `最近5日均换手率${
          formatNumber(changeJiYin, '+M.2%') || '--%'
        }，股性${stockAwayData}`;
      } catch (err) {
        errorReport({
          name: `dealTurnOverRate函数异常，${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
    /**
     * 处理趋势基因
     */
    dealTrend(data) {
      try {
        let trendData;
        if (typeof data === 'number') {
          const DOWN = 2;
          const MIDDLE = 5;
          const UP = 7;
          // [0,2]：向下，(2,5]：尚不明朗，(5,7]：向上，7以上：强劲
          if (data <= DOWN && data >= 0) {
            trendData = '向下';
          } else if (data > DOWN && data <= MIDDLE) {
            trendData = '尚不明朗';
          } else if (data > MIDDLE && data <= UP) {
            trendData = '向上';
          } else {
            trendData = '强劲';
          }
        } else {
          trendData = '--';
        }
        this.geneInfo.trend.analysis = `15分钟级别k线，六大均线及布林上轨整体趋势${trendData}`;
      } catch (err) {
        errorReport({
          name: `dealTrend函数异常，${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
    /**
     * 处理人气、突破、缩量上涨基因
     */
    dealOther(data, key) {
      try {
        const formatData = formatNumber(data, '+M') || '--';
        const dealGeneObj = {
          popularity: value => `15分钟级别k线，10个周期内，收阳线的周期k线有${value}根`,
          breakthrough: value => `15分钟级别k线，10个周期内大幅拉升2%的周期出现${value}次`,
          shrinkageUp: value => `15分钟级别k线，10个周期内缩量上涨的周期出现${value}次`,
        };
        this.geneInfo[key].analysis = dealGeneObj[key](formatData);
      } catch (err) {
        errorReport({
          name: `dealOther函数异常，${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
    /**
     * 处理大单基因
     */
    dealBigMoney(data) {
      try {
        const { circulationMarketValue, bigMoney } = data;
        let geguMoney;
        if (circulationMarketValue) {
          geguMoney = convertNumber(circulationMarketValue, 'hundredMillion');
        } else {
          geguMoney = '--';
        }
        let compareMoney;
        const BILLION = 1000000000;
        const FIVEBILLION = 5000000000;
        // 如果流通市值小于10亿，则属于较小盘面，如果大于10亿小于50亿，则属于中等盘面，如果大于50亿，则属于较大盘面
        if (circulationMarketValue) {
          if (circulationMarketValue < BILLION) {
            compareMoney = '较小';
          } else if (circulationMarketValue >= BILLION && circulationMarketValue <= FIVEBILLION) {
            compareMoney = '中等';
          } else if (circulationMarketValue > FIVEBILLION) {
            compareMoney = '较大';
          } else {
            compareMoney = '--';
          }
        }
        let shortGoInMoney;
        if (bigMoney) {
          if (bigMoney < 0) {
            shortGoInMoney = `流出${convertNumber(Math.abs(bigMoney), 'hundredMillion')}元`;
          } else {
            shortGoInMoney = `流入${convertNumber(Math.abs(bigMoney), 'hundredMillion')}元`;
          }
        } else {
          shortGoInMoney = '流出--';
        }
        this.geneInfo.bigMoney.analysis = `当前个股流通市值为${geguMoney}，属于${compareMoney}盘面，短期内主力资金净${shortGoInMoney}`;
      } catch (err) {
        errorReport({
          name: `dealBigMoney函数异常，${err.name}`,
          message: err.message,
          stack: err.stack,
        });
      }
    },
  },
  mounted() {
    this.dealGeneData(this.geneData);
  },
  watch: {
    // 防止组件渲染结束接口数据未返回
    geneData(val) {
      this.dealGeneData(val);
    },
  },
};
</script>

<style lang="less" scoped>
.block {
  margin: 0 0 16px !important;
  padding: 32px 32px 16px !important;
  /deep/.num {
    font-family: THS-Bold;
    font-size: 48px;
    color: #f03036;
    letter-spacing: 0;
    line-height: 44px;
    font-weight: 700;
  }
}
</style>
